<template>
  <div style="background-color: #ffffff; padding: 24px">
    <a-form layout="inline">
      <a-row>
        <a-col :span="12">
          <a-form-item label="请选择日期">
            <a-range-picker :placeholder="['开始时间', '结束时间']"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="商品名称">
            <a-input placeholder="输入商品名称" :style="{width:'400px'}"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="searchTool">
      <a-button type="primary" html-type="submit">
        查询
      </a-button>
      <a-button :style="{marginLeft:'10px'}">
        重置
      </a-button>
      <br/>
      <span style="float:right;margin: 10px 0px">数据更新时间: 2020-09-04</span>
    </div>
    <a-table :columns="columns" :data-source="data"></a-table>
  </div>
</template>

<script>
  const columns = [
    {
      title: '商品id',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '商品名称',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: '商品曝光量',
      dataIndex: 'address',
      key: 'address 1'
    },
    {
      title: '商品详情页浏览量',
      dataIndex: 'address',
      key: 'address 2'
    },
    {
      title: '有效订单量',
      dataIndex: 'address',
      key: 'address 3'
    },
    {
      title: '有效商品件数',
      dataIndex: 'address',
      key: 'address 3'
    },
    {
      title: '有效金额',
      dataIndex: 'address',
      key: 'address 3'
    },
    {
      title: '转化率',
      dataIndex: 'address',
      key: 'address 3'
    },
    {
      title: '平台占比',
      dataIndex: 'address',
      key: 'address 3'
    }
  ]
  const data = []
  export default {
    name: 'ProductAnalyze',
    data () {
      return {
        data,
        columns
      }
    }
  }
</script>

<style scoped>
  .searchTool {
    margin-top: 20px;
    float: right;
  }
</style>
